<template>
  <section>
    <el-button size="mini" type="primary" @click="dialog = true">生成</el-button>
    <el-popover placement="right-start" width="400" trigger="click">
      <el-form label-width="55px" label-position="right">
        <el-form-item label="用户" size="mini">
          <el-select v-model="selUser"  :filterable="true" remote :reserve-keyword="false" size="mini" allow-create
                     default-first-option  placeholder="请输入姓名" :remote-method="remoteMethod" value-key="id">
            <el-option v-for="(user,index) in users" :key="index" :label="user.name" :value="user" v-if="users">
              <span style="float: left">{{ user.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ user.phone }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input size="mini" v-model="newDataForm.title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="success" @click="createReportDataBtn(newDataForm)">新建</el-button>
        </el-form-item>
      </el-form>
      <el-button slot="reference" size="mini">新建</el-button>
    </el-popover>
    <el-dialog :visible.sync="dialog">
      <make-report-data-by-examine v-on:cancel="cancelDialogBtn"></make-report-data-by-examine>
    </el-dialog>
    <el-table :data="reportDataList">
      <el-table-column type="index" label="序号"/>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="customerName" label="用户"></el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button @click="editDataBtn(scope.row)" size="mini" type="primary">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="createUserDialog">
      <create-user :newName="newName" v-on:cancel="cancelDialog"></create-user>
    </el-dialog>
  </section>
</template>

<script>
  import createUser from "@/components/createUser"
  import DateFormat from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import makeReportDataByExamine from './makeReportDataByExamine'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "index",
    components:{makeReportDataByExamine,createUser},
    data() {
      return {
        createUserDialog:false,
        newName:null,
        dataForm:{
          sport:[],
          foodEffect:[],
          foodCategory:[],
          recipe:[],
          physicalSubtype:[],
          disease:[],
          foodSuggest:[],
          sixQi:[{id:1,name:'相火',point:0},
            {id:2,name:'燥金',point:0},
            {id:3,name:'寒水',point:0},
            {id:4,name:'湿土',point:0},
            {id:5,name:'风木',point:0}],
          massage:[],
          guasha:[],
          aijiu:[],
        },
        users:[],
        selUser:null,
        dialog:false,
        newDataForm:{
          title:'',
          departmentCode:'',
          customerId:''
        },
        reportDataList:null
      }
    },
    created(){
      //获取报告数据列表
      this.getReportDataList()
      this.newDataForm.departmentCode=this.department.code
    },
    watch:{
      selUser(nv,ov){
        console.log(nv)
        if(typeof(nv) === "string"){
          //跳出新建用户的对话框
          this.$message('未找到该用户，请确认用户是否存在！')
          this.newName=nv
          this.createUserDialog=true
        }
      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      cancelDialog(e){
        console.log(e)
        this.selUser=e
        this.createUserDialog=false
      },
      cancelDialogBtn(e){
        this.dialog=false
        console.log('把新建的reportData插入当前表格',e)
        this.reportDataList.unshift(e)
      },
      getReportDataList(pageNo){
        this.fetch({name:"getReportDataList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            console.log(res.content)
            this.reportDataList=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      remoteMethod(keywords) {
        //timeout,1000
        clearTimeout()
        setTimeout(()=>{
          this.fetch({name:"getUserList",data:{keywords}})
            .then(res=>{
              console.log(res)
              this.users=res.content
            })
            .catch(err=>{
              console.log(err)
              errHandler.handle(this,err)
            })},1000)
      },
      formatDate(a){
        console.log('时间格式——————————————————————————',a)
        return DateFormat.format(a)
      },
      createReportDataBtn(newDataForm){
        let data={...this.dataForm,currDate:this.formatDate(new Date())}
        newDataForm.data=data
        newDataForm.customerId=this.selUser.id
        this.createReportData(newDataForm)
      },
      createReportData(data){
        console.log('参数：',data)
        this.fetch({name:"createReportData",data:{...data}})
          .then(res=>{
            this.reportDataList.unshift(e)
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      editDataBtn(row){
        console.log(row)
        this.$router.push({path:'/reportData/makeData/'+row.id})
      }
    }
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .box-card {
    width: 80%;
    margin-top: 20px;
  }
</style>
